
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SweetAlert2例子</title>
    <link href="https://mirror.fe80.cn/limonte-sweetalert2/11.11.0/sweetalert2.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        body {
            padding: 100px;
            font-family: Arial, sans-serif; /* 设置全局字体 */
            background-color: #f4f4f9; /* 设置背景色 */
        }

        .container {
            background-color: #fff; /* 容器背景色 */
            padding: 20px; /* 容器内边距 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */
            max-width: 1200px; /* 最大宽度 */
            margin: 0 auto; /* 水平居中 */
        }

        .container p {
            font-size: 28px;
            text-align: center;
            color: #333; /* 标题颜色 */
            margin-bottom: 20px; /* 标题下方间距 */
        }

        .container div {
            margin-bottom: 20px; /* 每个 demo 之间的间距 */
        }

        .container button {
            padding: 10px 20px; /* 按钮内边距 */
            font-size: 16px; /* 按钮字体大小 */
            color: #fff; /* 按钮文字颜色 */
            background-color: #007bff; /* 按钮背景色 */
            border: none; /* 去掉边框 */
            border-radius: 4px; /* 圆角 */
            cursor: pointer; /* 鼠标悬停效果 */
            transition: background-color 0.3s; /* 背景色过渡效果 */
        }

        .container button:hover {
            background-color: #0056b3; /* 按钮悬停时的背景色 */
        }
        /* 大弹窗自定义 */
        .custom-popup>.swal2-html-container{
            text-align: left;
        }
        .custom-popup>.swal2-title{
            text-align: left;
        }
        .custom-popup>.swal2-actions{
            text-align: right;
        }
        /* 可选的自定义样式 */
        .custom-popup {
            font-size: 16px;
            line-height: 1.6;
        }
        @media (max-width: 780px) {
            body{
                padding: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <p style="font-size: 32px;text-align:center;">SweetAlert2例子</p>
        <div class="demo_1">
            带有 确定和取消的 弹框1：
            <button>点击这里</button>
        </div>
        <div class="demo_2">
            带有 确定和取消的 弹框2:
            <button>点击这里</button>
        </div>
        <div class="demo_3">
            带有 展示 标签内容 的弹框：
            <button>点击这里</button>
        </div>
        <div class="demo_4">
            带有定位 和 消失时间的 弹框：
            <button>点击这里</button>
        </div>
        <div class="demo_5">
            自定义 第三方 css 的 弹框 (推荐使用 Animate.css )：
            <button>点击这里</button>
        </div>
        <div class="demo_6">
            右上角 通知类 弹窗：
            <button>点击这里</button>
        </div>
        <div class="demo_7">
            做 一个自己的 通用模版：
            <button>点击这里</button>
        </div>
        <div class="demo_8">
            弹窗：
            <button>点击这里</button>
        </div>
    </div>
<script src="https://mirror.fe80.cn/limonte-sweetalert2/11.11.0/sweetalert2.min.js"></script>
<script src="https://mirror.fe80.cn/jquery/3.6.1/jquery.min.js"></script>
<script>
    $(function () {
        $(".demo_1 button").click(function () {
            Swal.fire({
                icon: 'warning', // 弹框类型
                title: '注销帐号', //标题
                text: "注销后将无法恢复，请谨慎操作！", //显示内容

                confirmButtonColor: '#3085d6',// 确定按钮的 颜色
                confirmButtonText: '确定',// 确定按钮的 文字
                showCancelButton: true, // 是否显示取消按钮
                cancelButtonColor: '#d33', // 取消按钮的 颜色
                cancelButtonText: "取消", // 取消按钮的 文字

                focusCancel: true, // 是否聚焦 取消按钮
                reverseButtons: true  // 是否 反转 两个按钮的位置 默认是  左边 确定  右边 取消
            }).then((isConfirm) => {
                try {
                    //判断 是否 点击的 确定按钮
                    if (isConfirm.value) {
                        Swal.fire("成功", "点击了确定", "success");
                    } else {
                        Swal.fire("取消", "点击了取消", "error");
                    }
                } catch (e) {
                    alert(e);
                }
            });
        });
        $(".demo_2 button").click(function () {
            Swal.fire({
                title: '领取你的寻龙装备！',
                input: 'select',
                html:
                    '<input id="swal-input1" class="swal2-input">' +
                    '<input id="swal-input2" class="swal2-input">',
                inputAttributes: {
                    autocapitalize: 'off'
                },
                showCancelButton: true,
                confirmButtonText: 'Look up',
                showLoaderOnConfirm: true,
                preConfirm: (login) => {
                    return fetch(`//api.github.com/users/${login}`)
                        .then(response => {
                            if (!response.ok) {
                                throw new Error(response.statusText)
                            }
                            return response.json()
                        })
                        .catch(error => {
                            Swal.showValidationMessage(
                                `Request failed: ${error}`
                            )
                        })
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.value) {
                    Swal.fire({
                        title: `${result.value.login}'s avatar`,
                        imageUrl: result.value.avatar_url
                    })
                }
            })
        });
        $(".demo_3 button").click(function () {
            var content = "无记录";
            var msg = ""; //msg 是从外面传入的数据

            if (msg) {

                content = "<p style='color: red'>最近一次操作后的5小时内有效</p> "
                    + "<p>可以使用 Ctrl +F 查找关键字</p>"
                    + "<table class='table_list'>"
                    + "<tr>"
                    + "     <th class='js_tr_data'> 时间</th> <th>名称</th> <th>密码</th>"
                    + "</tr>"
                    + msg
                    + "</table>"
            }

            Swal.fire({
                title: '<strong>记录</strong>',
                icon: 'info',
                html: content, // HTML
                focusConfirm: true, //聚焦到确定按钮
                showCloseButton: true,//右上角关闭
            })

        });
        $(".demo_4 button").click(function () {
            Swal.fire({
                position: 'top-end', //定位 左上角
                icon: 'success',
                title: 'Your work has been saved',
                showConfirmButton: false,
                timer: 1500
            });

        });
        $(".demo_5 button").click(function () {
            Swal.fire({
                title: 'Custom animation with Animate.css',
                animation: false,
                customClass: 'animated tada'
            })

        });

        $(".demo_6 button").click(function () {
            Swal.fire({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                icon: 'success',
                title: 'Signed in successfully'
            })

        });
        //定义模版 (可多次使用)
        var MyBox = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        });
        $(".demo_7 button").click(function () {


            //调用
            MyBox.fire({
                icon: 'success',
                title: 'successfully'
            });

        });
        // 弹窗提示
        $(".demo_8 button").click(function () {
            Swal.fire({
                title: '操作提示',  // 弹窗标题
                //icon: 'info',      // 图标类型（可选：success/error/warning/info/question）
                html: `1、您的操作已成功提交！请仔细核对以下信息：<br>
                2、所有数据均已保存，<span style="color:red;">系统正在处理中。</span><br>
                3、此过程可能需要几分钟，请勿关闭页面。<br>
                4、处理完成后您将收到通知。如有疑问请<a href="https://www.baidu.com" target="_blank">联系客服</a>。
                <p>备注：2025年3月29日</p>`,  // 正文内容
                confirmButtonText: '好的，知道了',  // 按钮文字
                width: 700,        // 弹窗宽度
                customClass: {
                    popup: 'custom-popup'  // 自定义样式类
                }
            });
        });
    });
</script>
</body>
</html>